<template>
  <div class="app-main-container">
    <transition name="fade">
      <Cropper
        v-if="dialogCropperVisible"
        :option-img="optionImg"
        :fileinfo="fileinfo"
        use-type="TICKET_IMG"
        :fixed-number="[100,100]"
        :auto-upload="false"
        @formSubmit="cropperSubmit"
        @formClose="cropperClose"
      />
    </transition>
    <div class="app-main-title">
      {{ copName }}
      <div class="goback" @click="goBack">
        <i class="el-icon-refresh-left" /> {{ $t('message.fhsyy') }}
      </div>
    </div>
    <div>
      <el-form
        ref="form"
        class="doumee-form"
        :model="param"
        :rules="rules"
        label-width="auto"
        label-suffix="："
      >
        <div class="property-title">{{ $t('message.mpxx') }}</div>
        <el-form-item :label="$t('message.mpmc')" prop="name">
          <el-input
            v-model="param.name"
            class="w400"
            type="text"
            :placeholder="$t('message.qsr') + $t('message.mpmc')"
            maxlength="50"
          />
        </el-form-item>
        <el-form-item :label="$t('message.syxm')" prop="projects">
          <el-checkbox-group v-model="param.projects">
            <el-checkbox
              v-for="(item, index) in projectList"
              :key="index"
              :disabled="Boolean(ticketId) && item.disable && isSale == '1'"
              :label="item.id"
            >{{ item.projectName }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item :label="$t('message.mpjg')" prop="price">
          <el-input
            v-model="param.price"
            class="w200"
            type="text"
            :disabled="Boolean(ticketId) && isSale == '1'"
            oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
            :placeholder="$t('message.qsr') + $t('message.mpjg')"
          />
        </el-form-item>
        <div class="df_ac">
          <el-form-item :label="$t('message.mpyxq')" class="select-style" prop="type">
            <el-select
              v-model="param.type"
              class="w200"
              :disabled="Boolean(ticketId) && isSale == '1'"
              @change="changeType"
            >
              <el-option :label="$t('message.yysjnyx')" value="0" />
              <el-option :label="$t('message.gdsd')" value="1" />
              <el-option :label="$t('message.gdsc')" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="param.type != 0"
            :label="$t('message.sysd')"
            prop="timeFrameUsed"
          >
            <!-- <span class="label ml20" /> -->
            <el-time-picker
              key="123"
              v-model="param.timeFrameUsed"
              :disabled="Boolean(ticketId) && isSale == '1'"
              is-range
              :range-separator="$t('message.zhi')"
              style="width: 400px"
              :start-placeholder="$t('message.kssj')"
              :end-placeholder="$t('message.jssj')"
              format="HH:mm"
              value-format="HH:mm"
              :placeholder="$t('message.xzsjfw')"
            />
          </el-form-item>
        </div>
        <el-form-item
          v-if="param.type === '2'"
          :label="$t('message.sysc')"
          prop="duration"
        >
          <el-input
            v-model="param.duration"
            :disabled="Boolean(ticketId) && isSale == '1'"
            class="w200"
            type="text"
            oninput="value=value.replace(/^(0+)|[^\d]+/g, '').slice(0, 5)"
            :placeholder="$t('message.zxzcyxs')"
            maxlength="50"
          />
          <span class="ml10">{{ $t('message.xiaoshi') }}</span>
        </el-form-item>
        <el-form-item :label="$t('message.xsqd')" prop="channel">
          <el-checkbox-group v-model="param.channel">
            <el-checkbox
              v-for="(item, index) in channels"
              :key="index"
              :label="item.value"
            >
              {{ item.name }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item :label="$t('message.zklx')" class="select-style" prop="discountType">
          <el-select
            v-model="param.discountType"
            :placeholder="$t('message.qxz') + $t('message.zklx')"
            :disabled="Boolean(ticketId) && isSale == '1'"
            class="w200"
          >
            <el-option
              v-for="item in discountTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <div
          v-if="param.discountType == '1'"
          style="display: flex; flex-wrap: wrap"
        >
          <el-form-item
            v-for="vip in vipTypes"
            :key="vip.id"
            align="center"
            :label="vip.name"
            :prop="`discountMap.${vip.id}`"
            :disabled="Boolean(ticketId) && isSale == '1'"
            :rules="{
              required: true,
              message: $t('message.qsr') + $t('message.hyzk'),
              trigger: 'blur',
            }"
          >
            <el-input
              v-model="param.discountMap[vip.id]"
              class="w200"
              :disabled="vip.disabled && Boolean(ticketId) && isSale == '1'"
              onkeyup="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
              oninput="if(value<0||value>1) { value = ''} else {value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')}"
              type="text"
              :placeholder="$t('message.qsr') + $t('message.hyzk') + '(' + $t('message.bllwxs') + ')'"
              maxlength="50"
            />
          </el-form-item>
        </div>
        <div class="line-style" />
        <div class="property-title">{{ $t('message.gzsz') }}</div>
        <el-form-item :label="$t('message.xssd')" prop="saleDate">
          <el-date-picker
            v-model="param.saleDate"
            :disabled="Boolean(ticketId) && isSale == '1'"
            type="daterange"
            :range-separator="$t('message.zhi')"
            :start-placeholder="$t('message.ksrq')"
            ormat="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            :end-placeholder="$t('message.jsrq')"
            class="w400"
          />
        </el-form-item>
        <el-form-item :label="$t('message.rffsl')" prop="circulationDay">
          <el-input-number
            v-model="param.circulationDay"
            :min="1"
            :step="1"
            style="margin-top: 4px"
            step-strictly
          />
        </el-form-item>
        <el-form-item :label="$t('message.sysj2')">
          <el-checkbox v-model="checkAll" style="margin-right: 30px" :indeterminate="isIndeterminate" @change="handleCheckAllChange">{{ $t('message.quanxuan') }}</el-checkbox>
          <el-checkbox-group v-model="param.useDays" style="height: 36px;" @change="handleCheckedCitiesChange">
            <el-checkbox
              v-for="item in applyTimesOptions"
              :key="item.value"
              :disabled="Boolean(ticketId) && item.disable && isSale == '1'"
              :label="item.value"
            >{{ item.label }}</el-checkbox>
          </el-checkbox-group>
          <span class="ml20 placeholder9">{{ $t('message.bxzbsmtjksy') }}</span>
        </el-form-item>
        <el-form-item :label="$t('message.sfxg')">
          <el-radio v-model="param.LimitBuy" label="1">{{ $t('message.bxg') }}</el-radio>
          <el-radio v-model="param.LimitBuy" label="2">{{ $t('message.xgsl') }}</el-radio>
          <el-input-number
            v-if="param.LimitBuy === '2'"
            v-model="param.buyNum"
            :step="1"
            :min="1"
            step-strictly
            size="medium"
          />
          <span class="placeholder6 ml20">{{ $t('message.xzdghygmdmpsl') }}</span>
        </el-form-item>
        <el-form-item :label="$t('message.csjf')">
          <el-radio
            v-model="param.charge"
            :disabled="Boolean(ticketId) && isSale == '1'"
            label="0"
          >{{ $t('message.bjf') }}</el-radio>
          <el-radio
            v-model="param.charge"
            :disabled="Boolean(ticketId) && isSale == '1'"
            label="1"
          >{{ $t('message.csjf') }}</el-radio>
          <template v-if="param.charge === '1'">
            <el-select
              v-model="param.tempId"
              :disabled="Boolean(ticketId) && isSale == '1'"
              :placeholder="$t('message.qxz') + $t('message.moban2')"
              class="w200"
            >
              <el-option
                v-for="item in ticketChargeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </template>
          <span
            class="placeholder6 ml20"
          >{{ $t('message.jfmbpzsm') }}</span>
        </el-form-item>
        <el-form-item :label="$t('message.jccgz')">
          <div>
            <span
              v-if="param.charge === '1'"
              class="placeholder6"
            >{{ $t('message.ccycjs') }}</span>
            <template v-else>
              <el-radio v-model="param.churuRule" label="1">{{ $t('message.bx') }}</el-radio>
              <el-radio v-model="param.churuRule" label="2">{{ $t('message.xzcs') }}</el-radio>
              <el-input-number
                v-if="param.churuRule === '2'"
                v-model="param.inOutNum"
                :step="1"
                :min="1"
                step-strictly
                size="medium"
              />
              <span
                v-if="param.churuRule === '2'"
                class="placeholder6 ml20"
              >{{ $t('message.xzcsxyyjzc') }}</span>
            </template>
          </div>
        </el-form-item>

        <div class="line-style" />
        <div class="property-title">{{ $t('message.qtpz') }}</div>
        <el-form-item :label="$t('message.piaoyan')" class="select-style">
          <div class="upload-wrap">
            <el-upload
              :action="uploadFileUrl"
              accept=".jpg,.png"
              :on-change="addFileChange"
              :show-file-list="false"
              :auto-upload="false"
              :data="uploadParam"
              class="device-uploader"
            >
              <i class="el-icon-plus uploader-icon" />
              <div
                v-show="param.ticketPic1"
                class="file"
                :style="'background-image: url(' + param.ticketPic1 + ')'"
              >
                <div class="delete">
                  <i
                    class="el-icon-delete icon"
                    @click.stop="deleteDeviceConfigAddImage"
                  />
                </div>
              </div>
            </el-upload>
            <div class="placeholder9">
              <div>{{ $t('message.jycc') }}：{{ '100px X 100px' }}</div>
              <div>{{ $t('message.zctpsm') }}</div>
            </div>
          </div>
        </el-form-item>
        <el-form-item :label="$t('message.mpxq')" prop="info">
          <el-input v-model="param.info" type="textarea" />
        </el-form-item>
        <el-form-item :label="$t('message.gmxz')" prop="purchaseNotes">
          <el-input v-model="param.purchaseNotes" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button
            v-preventReClick
            :loading="subLoading"
            type="primary"
            @click="onSubmit()"
          >{{ $t('message.tj') }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  ticketAdd,
  cardList,
  getProjectList,
  ticketDefaultPic,
  uploadFile,
  ticketDetail,
  editTicket,
  ticketChargeTemp
} from '@/api'
import Cropper from '@/components/cropper'
import dayjs from 'dayjs'
import { rules, applyTimesOptions } from './config'
import { shortcuts } from '@/utils/config'
export default {
  name: 'TicketAdd',
  components: {
    Cropper
  },
  data() {
    return {
      isSale: '0',
      ticketId: '',
      isDetail: false,
      subLoading: false,
      dialogCropperVisible: false,
      optionImg: '',
      files: {},
      fileinfo: {},
      pickerOptions: {
        shortcuts,
        disabledDate(time) {
          return (
            time.getTime() < new Date(new Date().toLocaleDateString()).getTime()
          )
        }
      },
      isIndeterminate: false,
      checkAll: false,
      copName: this.$t('message.xzmp'),
      projectList: [],
      firstQueryTime: '',
      vipTypes: [],
      ticketPic: 0,
      tp: '',
      imageList: [],
      uploadFileUrl: uploadFile,
      uploadParam: {
        folder: 'TICKET_IMG'
      },
      ticketPicList: [],
      channels: [
        { value: '1', name: this.$t('message.xcx'), disable: false },
        { value: '2', name: this.$t('message.cgd'), disable: false }
      ],
      discountTypeList: [
        { value: '0', label: this.$t('message.mrzk') },
        { value: '1', label: this.$t('message.zdyzk') }
      ],
      param: {
        picType: '1',
        projects: [],
        channel: [],
        discountMap: {},
        ticketRules: {
          useItems: ''
        },
        name: '',
        discountType: '0',
        price: '',
        venueId: '',
        type: '', // 门票有效期
        timeFrameUsed: [], // 使用时段
        duration: '', // 使用时长
        useDays: [],
        LimitBuy: '1', // 是否限购
        buyNum: 0, // 限购数量
        charge: '0', // 超时计费判断
        tempId: '', // 模版id
        churuRule: '1', // 进出场次数判断
        inOutNum: 1, // 进出场次数
        counterfoil: ''
      },
      ticketChargeList: [],
      rules,
      applyTimesOptions: [...applyTimesOptions]
    }
  },
  created() {
    this.getticketChargeTemp() // 获取计费模版
    // this.getTicketPic()// 获取票样
    this.firstQueryTime = this.setTempDate()
    if (this.$route.query.id) {
      // console.log(this.$route.query.id)
      if (!this.$route.query.type) {
        this.copName = this.$t('message.bjmp')
        this.ticketId = this.$route.query.id
        if (this.$route.query.isSale) {
          this.isSale = this.$route.query.isSale
        }
        this.getTicketDetail(this.$route.query.id)
      } else {
        this.getTicketDetail(this.$route.query.id)
        this.ticketId = ''
      }
    } else {
      this.ticketId = ''
      this.getCardList()
      this.getProjects()
      this.getTicket()
    }
    const venueInfo = JSON.parse(sessionStorage.getItem('venueInfo'))
    if (venueInfo && venueInfo.openTimeStart && venueInfo.openTimeEnd) {
      this.$set(this.param, 'timeFrameUsed', [
        venueInfo.openTimeStart,
        venueInfo.openTimeEnd
      ])
    }
  },
  methods: {
    handleCheckAllChange(val) {
      const arr = val ? this.applyTimesOptions.map(e => e.value) : []
      this.$set(this.param, 'useDays', arr)
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.applyTimesOptions.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.applyTimesOptions.length
    },
    onSubmit() {
      const param = { ...this.param }
      param.venueId = sessionStorage.getItem('venueId')
      if (this.ticketId) {
        this.param.id = this.$route.query.id
        this.$refs.form.validate((valid) => {
          if (valid) {
            param.ticketRules.useItems = param.projects.toString(',')
            if (param.type !== '0') {
              param.ticketRules.useTimeStart = param.timeFrameUsed[0] //
              param.ticketRules.useTimeEnd = param.timeFrameUsed[1] //
            }
            param.ticketRules.useDays = param.useDays.join(',') //
            param.tempId = param.charge === '1' ? param.tempId : '' //
            param.buyNum = param.LimitBuy === '1' ? '0' : param.buyNum //
            param.inOutNum = param.churuRule === '1' ? 0 : param.inOutNum //
            param.inOutNum = param.tempId ? 1 : param.inOutNum //
            param.saleDateStart = param.saleDate[0]
            param.saleDateEnd = param.saleDate[1]
            // if (this.ticketId && new Date().getTime() > new Date(param.saleDateEnd + ' 23:59:59')) {
            //   return this.$message.warning('编辑操作销售结束时间不可小于当前时间')
            // }
            param.channel = this.param.channel.join(',')
            this.subLoading = true
            editTicket({
              param: param,
              userId: sessionStorage.getItem('userId')
            })
              .then((res) => {
                this.subLoading = false
                if (res.errorCode === '000000') {
                  this.$router.go(-1)
                  this.$message.success(this.$t('message.bccg'))
                }
                console.log(res)
              })
              .catch((err) => {
                this.subLoading = false
                console.log(err)
              })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      } else {
        this.$refs.form.validate((valid) => {
          if (valid) {
            if (param.type !== '0') {
              param.ticketRules.useTimeStart = param.timeFrameUsed[0] //
              param.ticketRules.useTimeEnd = param.timeFrameUsed[1] //
            }
            param.id = ''
            param.ticketRules.useDays = param.useDays.join(',') //
            param.tempId = param.charge === '1' ? param.tempId : '' //
            param.buyNum = param.LimitBuy === '1' ? '0' : param.buyNum //
            param.inOutNum = param.churuRule === '1' ? 0 : param.inOutNum //
            param.inOutNum = param.tempId ? 1 : param.inOutNum //
            param.saleDateStart = param.saleDate[0]
            param.saleDateEnd = param.saleDate[1]
            param.ticketRules.useItems = param.projects.join(',')
            param.channel = this.param.channel.join(',')
            this.subLoading = true
            ticketAdd({
              param: param,
              userId: sessionStorage.getItem('userId')
            })
              .then((res) => {
                this.subLoading = false
                if (res.errorCode === '000000') {
                  this.$router.go(-1)
                  this.$message.success(this.$t('message.addcg'))
                }
                console.log(res)
              })
              .catch((err) => {
                this.subLoading = false
                console.log(err)
              })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    },
    changeType(e) {
      if (this.param.type === '0') {
        this.param.charge = '0'
      }
    },
    getticketChargeTemp() {
      const param = {
        pagination: {
          firstQueryTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
          page: 1,
          rows: 100
        },
        param: {
          name: '',
          status: '1'
        }
      }
      ticketChargeTemp(param).then((res) => {
        if (res.errorCode !== '000000') return
        this.ticketChargeList = res.recordList
      })
    },
    setTempDate() {
      // 获取时间
      var myDate = new Date()
      return (
        myDate.getFullYear() +
        '-' +
        (myDate.getMonth() + 1) +
        '-' +
        myDate.getDate() +
        ' ' +
        myDate.getHours() +
        ':' +
        myDate.getMinutes() +
        ':' +
        myDate.getSeconds()
      )
    },
    getProjects() {
      getProjectList({
        pagination: {
          page: 1,
          rows: 1000,
          firstQueryTime: this.firstQueryTime
        },
        param: {
          venueId: sessionStorage.getItem('venueId'),
          projectName: '',
          type: '1',
          status: ''
        }
      }).then((res) => {
        res.recordList.forEach((item) => {
          if (item.status === '1') {
            this.projectList.push(item)
          }
        })
        // for (const item of res.recordList) {
        //   if (item.status === '1') {
        //     this.projectList.push(item)
        //   }
        // }
        // this.projectList = res.recordList
      })
    },
    getTicket() {
      ticketDefaultPic({}).then((res) => {
        if (res.errorCode === '000000') {
          // console.log(res.recordList)
          res.recordList.forEach((item) => {
            if (item.status === '1') {
              this.projectList.push(item)
            }
          })
          // for (const item of res.recordList) {
          //   if (item.status === '1') {
          //     this.projectList.push(item)
          //   }
          // }
        }
        // console.log(res)
      })
    },
    getCardList() {
      // 获取卡类型列表
      cardList({
        pagination: {
          page: 1,
          rows: 1000,
          firstQueryTime: this.firstQueryTime
        },
        param: {
          cardName: null,
          isnormal: null,
          channel: null
        }
      })
        .then((res) => {
          if (res.errorCode === '000000') {
            res.recordList.forEach((item) => {
              if (item.status === '1') {
                this.vipTypes.push({
                  name: item.cardName,
                  id: item.id,
                  value: null
                })
              }
            })
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    getTicketDetail(id) {
      // 详情 获取卡类型列表 默认票样式 现有项目
      Promise.all([
        ticketDetail({ param: { ticketId: id }}),
        cardList({
          pagination: {
            page: 1,
            rows: 1000,
            firstQueryTime: this.firstQueryTime
          },
          param: {
            cardName: null,
            isnormal: null,
            channel: null,
            type: '1'
          }
        }),
        getProjectList({
          pagination: {
            page: 1,
            rows: 1000,
            firstQueryTime: this.firstQueryTime
          },
          param: {
            venueId: sessionStorage.getItem('venueId'),
            projectName: '',
            type: '1',
            status: '1'
          }
        })
      ])
        .then((res) => {
          // this.projectList = res[2].recordList
          // for (const item of res[2].recordList) {
          //   if (item.status === '1') {
          //     this.projectList.push(item)
          //   }
          // }
          this.projectList = res[2].recordList

          // this.vipTypes = res[1].recordList
          const discountmap = res[0].record.discount
          this.param = res[0].record
          this.isSale = res[0].record.isSale
          if (this.$route.query.type) {
            this.$set(this.param, 'id', '')
          }
          this.projectList.forEach(item => {
            if (this.param.projectIds && this.param.projectIds.indexOf(item.id) > -1) {
              item.disable = true
            } else {
              item.disable = false
            }
          })
          // this.param.projects = res[0].record.projectIds
          this.$set(this.param, 'saleDate', [
            res[0].record.saleDateStart,
            res[0].record.saleDateEnd
          ])
          this.$set(this.param, 'projects', res[0].record.projectIds || [])
          this.$set(this.param, 'ticketRules', { useItems: '' })
          let channel = res[0].record.channel || ''
          channel = channel.replace(this.$t('message.xcx'), '1')
          channel = channel.replace(this.$t('message.cgd'), '2')
          if (channel === '') {
            this.$set(this.param, 'channel', [])
          } else {
            this.$set(this.param, 'channel', channel.split(','))
          }

          this.channels.forEach(item => {
            console.log(item, this.param.channel)
            if (this.param.channel && this.param.channel.indexOf(item.value) > -1) {
              item.disable = true
            } else {
              item.disable = false
            }
          })

          // 1.5.4 迭代
          if (res[0].record.useTimeStart) {
            this.$set(this.param, 'timeFrameUsed', [
              res[0].record.useTimeStart,
              res[0].record.useTimeEnd
            ])
          }
          if (!res[0].record.charge) {
            this.$set(this.param, 'charge', '0')
          }
          this.$set(this.param, 'useDays', res[0].record.weekList || [])
          this.handleCheckedCitiesChange(res[0].record.weekList || [])
          if (!res[0].record.weekList || res[0].record.weekList.length === 0) {
            this.applyTimesOptions.forEach(item => {
              item.disable = true
            })
          } else {
            this.applyTimesOptions.forEach(item => {
              if (res[0].record.weekList.indexOf(item.value) > -1) {
                item.disable = true
              } else {
                item.disable = false
              }
            })
          }
          this.$set(
            this.param,
            'churuRule',
            res[0].record.inOutNum === 0 ? '1' : '2'
          )
          if (res[0].record.buyNum) {
            this.$set(
              this.param,
              'LimitBuy',
              res[0].record.buyNum === 0 ? '1' : '2'
            )
          } else {
            this.$set(
              this.param,
              'LimitBuy',
              '1'
            )
          }

          console.log('------', this.param)
          // this.showTicketImage()
          if (this.param.discountType === '1') {
            res[1].recordList.forEach((item) => {
              if (item.status === '1') {
                this.vipTypes.push({
                  name: item.cardName,
                  id: item.id,
                  value: discountmap[item.id],
                  disabled: discountmap[item.id]
                })
              }
            })
          } else {
            res[1].recordList.forEach((item) => {
              if (item.status === '1') {
                this.vipTypes.push({
                  name: item.cardName,
                  id: item.id,
                  value: null
                })
              }
            })
          }

          if (res[0].record.discountType === '0') {
            this.$set(this.param, 'discountMap', {})
          } else {
            this.$set(this.param, 'discountMap', discountmap)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    showTicketImage() {
      const imageList = []
      if (this.param.ticketPic1) {
        imageList.push({
          url: this.param.ticketPic1,
          response: {
            insertUrl: this.param.ticketPic,
            showUrl: this.param.ticketPic1
          }
        })
        this.imageList = [this.param.ticketPic]
      }
      this.imageList = imageList
    },
    handleAvatarSuccess(res, file) {
      this.param.ticketPic = res.insertUrl
      this.$refs.form.clearValidate()
    },
    // 裁剪确定按钮
    cropperSubmit(config) {
      // preImg 完整路径  urlPre 不包含域名
      if (config.success) {
        this.$set(this.param, 'ticketPic', config.insertUrl)
        this.$set(this.param, 'ticketPic1', config.showUrl)
        // this.param.ticketPic = config.insertUrl
        // this.param.ticketPic1 = config.showUrl
        this.fileinfo = config
        this.$refs.form.clearValidate()
        this.dialogCropperVisible = false
      } else {
        this.$message.error(config.msg || this.$t('message.scsb'))
        this.$refs.form.clearValidate()
        this.dialogCropperVisible = false
      }
    },
    async addFileChange(file, fileList) {
      // 上传，拿到file文件
      this.files = file.raw
      this.$nextTick(() => {
        this.optionImg = URL.createObjectURL(file.raw)
        this.fileinfo = file.raw
        this.dialogCropperVisible = true
      })
    },
    // 裁剪取消
    cropperClose() {
      this.dialogCropperVisible = false
    },
    deleteDeviceConfigAddImage(file, fileList) {
      this.param.ticketPic = ''
      this.param.ticketPic1 = ''
    },
    // 返回上一页
    goBack() {
      this.$router.replace('/ticket/ticketList')
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.upload-wrap{
  display: flex;
  .placeholader{
    div{
     line-height: 24px;
    }
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.device-uploader {
  width: 84px;
  height: 84px;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor: pointer;
  border: 1px dashed #ccc;
  border-radius: 8px;
  transition: all 0.3s;
  margin-right: 20px;
  &:hover {
    border-color: $menuActive;
    .uploader-icon {
      color: $menuActive;
    }
  }
  ::v-deep .el-upload {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .file {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      .delete {
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: none;
        align-items: center;
        justify-content: center;
        .icon {
          color: #fff;
        }
      }
      &:hover {
        .delete {
          display: flex;
        }
      }
    }
  }
  .uploader-icon {
    color: #aaaaaa;
    font-size: 22px;
    transition: all 0.3s;
  }
}
.line-style {
  margin-bottom: 30px;
}
.app-main-container {
  ::v-deep .el-form-item__content {
    display: flex;
    align-items: center;
  }
}

.division-line {
  text-align: center;
  display: inline-block;
  color: #999;
  width: 50px;
}
.count-style {
  display: inline-block;
  width: 45%;
  height: 60px;
}
.input-style {
  margin-left: 10px;
  width: 60%;
}
.select-style {
  vertical-align: middle;
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
.upload-style {
  vertical-align: middle;
  display: inline-block;
  // width: 60px;
  // height: 60px;
  border: none;
}
.img-style {
  margin: auto;
  background-color: #eee;
  width: 100px;
  height: 60px;
  vertical-align: middle;
}
</style>
